<template>
  <view class="flex-col page">
    <view class="flex-col group_1">
		<scroll-view scroll-y="true" v-if="list.length>0" :style="{height:scrollHeight+'px'}" @scrolltolower="loadmore">
		<view class="flex-col list">
		  <view class="flex-col list-item" :key="i" v-for="(item, i) in list">
		    <view class="justify-between">
		      <text class="text_1">{{item.message}}</text>
		      <text class="text_3">{{item.createDate}}</text>
		    </view>
		    <text class="text_5">订单编号：{{item.ordersNumber}}</text>
		    <text class="text_5">{{item.ordersTypeStr}}</text>
		    <text class="text_5">{{item.serviceName}}</text>
		    <view class="justify-between group_3">
		      <view class="group_4">
		        <text class="text_11">{{item.provinceName+item.cityName+item.districtName}}</text>
		        <text class="text_13">I</text>
		        <text class="text_15">{{item.roomArea}}m²</text>
		        <text class="text_17">I</text>
		        <text class="text_19">{{item.roomTypeName}}</text>
		      </view>
		      <text class="text_21" @click="del(item.id,i)">删除</text>
		    </view>
		  </view>
		</view>
		</scroll-view>
   <view class="" v-else>
  	<u-empty style="height: 100vh;" width="250" mode="data" textSize="30rpx"
  		icon="http://cdn.uviewui.com/uview/empty/order.png">
  	</u-empty>
  </view>
      <view class="flex-col items-end section_5" @click="deleteAll">
        <view class="flex-col items-center text-wrapper"><text class="text_45">清空消息</text></view>
      </view>
    </view>
		<u-loadmore v-show="more" height="100" fontSize="26" :status="status" />
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        list: [],
		more:false,
			status: 'loadmore',
		scrollHeight:0,
		page:{
					  pageNum:1,
					  pageSize:10
		}
      };
    },
	created() {
	   this.queryOrderMessage();	
	},
	mounted() {
	   	this.getScrollHeight();
	},
    methods: {
		getScrollHeight()
		{
			const query = uni.createSelectorQuery().in(this);
			query.select('.page').boundingClientRect();
			query.select('.section_5').boundingClientRect();
			query.exec(r=>{
				
					//进入页面滚动到底部
				 this.scrollHeight=r[0].height-r[1].height;
			
			});
			console.log(this.scrollHeight);
		},
	queryOrderMessage(type=0)
	{
		this.$http('message.queryOrderMessage',this.page).then(r=>{
					 if(r.code==200 && r.data)
					 {
						 if(type==0)
						 {
							 this.list=r.data
						 }else{
							 if (r.data.length > 0) {
							 	this.list = this.list.concat(r.data);
							 	this.status = "loadmore";
							 } else {
							 	this.status = "nomore";
							 
							 }
							 
						 }
						
					 }
		});
	},
	loadmore()
	{
		// this.status = "loading";
		this.more = true;
		this.page.pageNum++;
		this.queryOrderMessage(1)
	},
	deleteAll()
	{
		uni.showModal({
							title: '提示',
							// 提示文字
							content: '确认清空吗？',
							// 取消按钮的文字自定义
							cancelText: "取消",
							// 确认按钮的文字自定义
							confirmText: "删除",
							//删除字体的颜色
							confirmColor:'red',
							//取消字体的颜色
							cancelColor:'#000000',
							success: res=> {
							if (res.confirm) {
								this.$http('linfomation.deleteAllOrderMessage').then(r=>{
								   if(r.code==200)
								   {
									   this.list=[];
								   }
								});
							}else {
								// 执行取消后的操作
							}
						}
					
				
		})
	},
	del(id,i)
	{
		
		uni.showModal({
				title: '提示',
				// 提示文字
				content: '确认删除该条信息吗？',
				// 取消按钮的文字自定义
				cancelText: "取消",
				// 确认按钮的文字自定义
				confirmText: "删除",
				//删除字体的颜色
				confirmColor:'red',
				//取消字体的颜色
				cancelColor:'#000000',
				success: res=> {
				if (res.confirm) {
					this.$http('message.deleteMessageById',{
						inspectionMessageId:id
					}).then(r=>{
					   if(r.code==200)
					   {
						   this.list.splice(i,1);
					   }
					});
				}else {
					// 执行取消后的操作
				}
			}
		
	
	 })
		
	},
	},
  };
</script>

<style scoped lang="scss">
  .list-item {
    padding: 29rpx 22rpx 0 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .text_5 {
    margin-top: 24rpx;
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    
  }
  .text_7 {
    margin-top: 17rpx;
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .text_9 {
    margin-top: 23rpx;
    align-self: flex-start;
    color: #333333;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .group_3 {
    margin-top: 32rpx;
    padding: 22rpx 0 39rpx;
    border-top: solid 1rpx #eeeeee;
  }
  .text_1 {
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_3 {
    margin-top: 12rpx;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .group_4 {
    line-height: 28rpx;
    height: 28rpx;
  }
  .text_21 {
    color: #ff371d;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_11 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_13 {
    color: #bfbfbf;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_15 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_17 {
    color: #bfbfbf;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_19 {
    color: #333333;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .page {
    background-color: #f6f7f9ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
  }
  .group_1 {
    flex: 1 1 auto;
    overflow-y: auto;
	
  }
  .list {
    padding: 15rpx 24rpx 42rpx;
  }
  .section_5 {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
    padding: 20rpx 0;
	height: 94rpx;
    background-color: #ffffff;
    box-shadow: 0px -2rpx 4rpx 0px #00000014;
  }
  .list-item:not(:first-of-type) {
    margin-top: 20rpx;
  }
  .text-wrapper {
    margin-right: 32rpx;
    padding: 19rpx 0;
    background-color: #1d6aff14;
    border-radius: 28rpx;
    width: 148rpx;
  }
  .text_45 {
    color: #1d6aff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
</style>